<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 设置为无缓存模式 -->
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <title>圆通快递单</title>

    <link rel="shortcut icon" href="favicon.ico">
    <script src="../../../res/plugins/bootstrap/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../res/plugins/layerui/layer/layer.js"></script>
    <script src="../../../res/js/openx.js"></script>
    <script src="../../../js/order/print/jquery-barcode.js"></script>

</head>

<body>
<style>

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "SimHei";
    }

    body {
        background-color: #fff;
        font-size: 10pt;
    }

    .content {
        padding: 1mm;
        width: 100mm;
        height: 180mm;
        background-color: #fff;
        margin: 0 auto;
        border: 1px solid #000;
    }

    .top {
        height: 8mm;
        border-bottom: 1px solid #000;
        font-family: "SimHei";
    }

    .flexMain {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .flexend {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        display: -webkit-box;
        display: -moz-box;
        -webkit-align-items: flex-end;
        -moz-align-items: flex-end;
        align-items: flex-end;
        -webkit-box-align: end;
        -moz-box-align: end;
    }

    .flexAlign {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        display: -webkit-box;
        display: -moz-box;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        -webkit-box-align: center;
        -moz-box-align: center;
    }

    .bignum {
        height: 15mm;
        line-height: 15mm;
        font-size: 36pt;
        font-family: "Arial Black";
        text-align: center;
        border-bottom: 2px solid #000;
    }

    .jibox {
        height: 10mm;
        border-bottom: 1px solid #000;
    }

    .jimg {
        width: 10mm;
        text-align: center;
        font-weight: bold;
        font-size: 0;
    }

    .jimg span {
        font-size: 15pt;
    }

    .jimg img {
        width: 7mm;
    }

    .jitext {
        width: 40mm;
        font-weight: bold;
        font-size: 16pt;
    }

    .jicode {
        width: 55mm !important;
    }

    .receive {
        height: 15mm;
        border-bottom: 1px solid #000;
    }

    .receivetext {
        width: 90mm;
        font-weight: bold;
        font-size: 10pt;
    }

    .send {
        border-bottom: 1px solid #000;
        height: 12mm
    }

    .sendtext {
        width: 90mm;
        font-size: 8pt;
    }

    .codebig {
        width: 100%;
        height: 22mm;
        border-bottom: 1px solid #000;
    }

    .timebox {
        height: 27.6mm;
        border-bottom: 2px solid #000;
    }

    .time {
        width: 20mm;
        height: 100%;
        padding: 1mm 0 1mm 1mm;
        position: relative;
        border-right: 1px solid #000;
    }

    .time:after {
        content: "打印时间";
        font-size: 7pt;
        height: 3.5mm;
        line-height: 3.5mm;
        background: url(/v2/static/img/yto/icon_11.png) no-repeat right 0.2mm;
        background-size: 3mm 3mm;
        padding-right: 3.5mm;
        position: absolute;
        right: 1mm;
        bottom: 0.4mm;
    }

    .time p:first-of-type {
        font-size: 8pt;
    }

    .time p:nth-of-type(2) {
        font-size: 11pt;
    }

    .time p:nth-of-type(3) {
        font-size: 14pt;
    }

    .timetext {
        width: 60mm;
        height: 100%;
        font-size: 6pt;
        position: relative;
        margin-right: 20mm;
        padding: 1mm;
        border-right: 1px solid #000;
    }

    .timetext:after {
        content: "签收栏";
        font-size: 7pt;
        height: 3.5mm;
        line-height: 3.5mm;
        background: url(/v2/static/img/yto/icon_13.png) no-repeat right 0.2mm;
        background-size: 3mm 3mm;
        padding-right: 3.5mm;
        position: absolute;
        right: 1mm;
        bottom: 0.4mm;
    }

    .codemid {
        height: 10mm;
        border-bottom: 1px solid #000;
    }

    .codemid .flexMain {
        margin-left: 30mm;
    }

    .sandr {
        height: 20mm;
        border-bottom: 1px dotted #000;
    }

    .sandrcode {
        width: 20mm;
        height: 100%;
        border-left: 1px solid #000;
    }

    .sandrcode img {
        width: 100%;
    }

    .sandradr {
        height: 10mm;
        border-bottom: 1px solid #000;
    }

    .sandradr:last-of-type {
        border: 0;
    }

    .sandradr .sendtext {
        width: 68mm;
        font-size: 7pt;
        font-weight: normal;
    }

    .billnum {
        height: 8mm;
        border-bottom: 1px solid #000;
    }

    .billnum p:first-of-type {
        font-size: 16pt;
    }

    .billnum p:last-of-type {
        font-size: 12pt;
        text-align: right;
    }

    .printime {
        height: 6mm;
        font-size: 7pt;
    }

    .printime p:nth-of-type(2) {
        text-align: right;
    }

    .sandrlast {
        height: 12mm;
        border-top: 1px solid #000;
    }

    .sandrlast .sendtext {
        font-size: 7pt;
    }
</style>
<div class="content">
    <div class="top flexend"></div>
    <div class="bignum" name="shortAddress"></div>
    <div class="jibox flexAlign">
        <div class="jimg">
            <img src="../../../res/images/icon_08.png" width="" alt="" class="">
        </div>
        <div class="jitext" name="packageCenterName"></div>
        <div class="jicode flexMain" id="barcodeOne"></div>
    </div>

    <div class="receive flexAlign">
        <div class="jimg">
            <img src="../../../res/images/icon_03.png" width="" alt="" class="">
        </div>
        <div class="receivetext flexMain">
            <p name="receiverNamePhone"></p>
            <p name="receiverAddress"></p>
        </div>
    </div>

    <div class="send flexAlign">
        <div class="jimg"><span>寄</span></div>
        <div class="sendtext flexMain">
            <p name="sendNamePhone"></p>
            <p name="sendAddress"></p>
        </div>
    </div>

    <div class="codebig flexAlign">
        <div class="flexMain" id="barcodeTwo"></div>
    </div>

    <div class="timebox flexAlign">
        <div class="time flexMain">
            <p id="timeOne"></p>
            <p id="timeTwo"></p>
            <p id="timeThree"></p>
        </div>
        <div class="timetext">快件送达收件人地址，经收件人(寄件人)允许的代收人签字，视为送达，您的签字代表您已验收此包裹，并已确认商品信息无误、包装完好、没有划痕、破损等表面质量问题。</div>

    </div>

    <div class="codemid flexAlign">
        <div class="flexMain" id="barcodeThree">条形码</div>
    </div>

    <div class="sandr flexAlign">
        <div class="flexMain">
            <div class="sandradr flexAlign">
                <div class="jimg">
                    <img src="../../../res/images/icon_03.png" width="" alt="" class="">
                </div>
                <div class="sendtext flexMain">
                    <p name="receiverNamePhone"></p>
                    <p name="receiverAddress"></p>
                </div>
            </div>
            <div class="sandradr flexAlign">
                <div class="jimg"><span>寄</span></div>
                <div class="sendtext flexMain">
                    <p name="sendNamePhone"></p>
                    <p name="sendAddress"></p>
                </div>
            </div>
        </div>
        <div class="sandrcode"><img src="../../../res/images/Qr-code.png" alt=""></div>
    </div>

    <div class="billnum flexAlign">
        <p class="flexMain">圆通速递</p>
        <p name="mailNo"></p>
    </div>

    <div class="printime flexAlign">
        <p class="flexMain" id="timeFour"></p>
    </div>

    <div class="sandrlast flexAlign">
        <div class="jimg">
            <img src="../../../res/images/icon_03.png" width="" alt="" class="">
        </div>
        <div class="sendtext flexMain">
            <p name="receiverNamePhone"></p>
            <p name="receiverAddress"></p>
        </div>
    </div>

    <div class="sandrlast flexAlign">
        <div class="jimg"><span>寄</span></div>
        <div class="sendtext flexMain">
            <p name="sendNamePhone"></p>
            <p name="sendAddress"></p>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">

var deliveryCode = UrlParameter()['deliveryCode'];
var logisticsId = UrlParameter().logisticsId;
    if (deliveryCode) {
        $X("/logistics/logisticsListService", "getPrintInfo").callx({
            deliveryCode: deliveryCode,
            logisticsId:logisticsId,
            onResult: function (data) {
                layer.closeAll('loading')
            
                if (data) initContent(data);

                
            }, onError: function (error) {
                var res = JSON.parse(error);
                layer.msg("打印失败原因：" + res.message)
            }
        });
    } else {
        window.alert('deliveryCode is not defined');
    }



    function initContent(data) {
        $('p[name="receiverNamePhone"]').html((data.receiverName !== undefined ? data.receiverName : '') + '  ' + (data.receiverPhone !== undefined ? data.receiverPhone : ''));
        $('p[name="receiverAddress"]').html(data.receiverAddress !== undefined ? data.receiverAddress : '');
        $('p[name="sendNamePhone"]').html((data.sendName !== undefined ? data.sendName : '') + '  ' + (data.sendPhone !== undefined ? data.sendPhone : ''));
        $('p[name="sendAddress"]').html(data.sendAddress !== undefined ? data.sendAddress : '');
        $('div[name="shortAddress"]').html(data.shortAddress !== undefined ? data.shortAddress : '');
        $('div[name="packageCenterName"]').html(data.packageCenterName !== undefined ? data.packageCenterName : '');
        $('p[name="mailNo"]').html(data.mailNo !== undefined ? data.mailNo : '');
        $('#timeOne').html(new Date().format("yyyy/MM/dd"));
        $('#timeTwo').html(new Date().format("hh:mm:ss"));
        $('#timeThree').html(data.pickSerialNumber !== undefined ? '#' + data.pickSerialNumber : '');
        $('#timeFour').html('打印时间：' + (new Date().format("yyyy/MM/dd hh:mm:ss")));
        $("#barcodeOne").empty().barcode(data.packageCenterCode !== undefined ? data.packageCenterCode : '', "code128", {
            barWidth: 2,
            barHeight: 30,
            showHRI: false,
            fontSize: 10,
            output: 'css'
        });
        $("#barcodeTwo").empty().barcode(data.mailNo !== undefined ? data.mailNo : '', "code128", {
            barWidth: 2,
            barHeight: 50,
            showHRI: true,
            fontSize: 10,
            output: 'css'
        });
        $("#barcodeThree").empty().barcode(data.mailNo !== undefined ? data.mailNo : '', "code128", {
            barWidth: 1,
            barHeight: 22,
            showHRI: true,
            fontSize: 10,
            output: 'css'
        });
        setTimeout(function () {
            window.print();
        }, 500);
    }

</script>

</html>
